<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="抵用券明细"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 抵用券统计卡片 -->
      <view class="coupon-stats-card">
        <!-- 第一行：三个主要统计项 -->
        <view class="stats-row">
          <view class="stat-item">
            <view class="stat-label">
              <text>可用抵用券</text>
            </view>
            <view class="stat-value primary">1402.82</view>
          </view>
          <view class="stat-item clickable" @click="goToFrozenCoupon">
            <view class="stat-label">
              <text>冻结抵用券</text>
              <uni-icons type="help" size="14" color="#999"></uni-icons>
            </view>
            <view class="stat-value"
              >0.00
              <uni-icons
                type="right"
                size="12"
                color="#999"
                class="arrow-icon"
              ></uni-icons
            ></view>
          </view>
          <view class="stat-item">
            <view class="stat-label">
              <text>待结算抵用券</text>
              <uni-icons type="help" size="14" color="#999"></uni-icons>
            </view>
            <view class="stat-value">0.00</view>
          </view>
        </view>

        <!-- 第二行：两个附加统计项 -->
        <view class="additional-stats">
          <view
            class="additional-item clickable"
            @click="goToUnactivatedCoupon"
          >
            <text class="additional-label">未生效抵用券</text>
            <view class="flex justify-center items-center">
              <view class="additional-value">0.0000</view>
              <uni-icons type="right" size="12" color="#999"></uni-icons
            ></view>
          </view>
          <view class="additional-item clickable" @click="goToActivateCoupon">
            <text class="additional-label">潮客可激活抵用券</text>
            <view class="flex justify-center items-center">
              <text class="additional-value">4.7860</text>
              <uni-icons type="right" size="12" color="#999"></uni-icons
            ></view>
          </view>
        </view>
      </view>

      <!-- Tab 切换和日期选择器组合 -->
      <view class="tab-date-container">
        <!-- Tab 切换 -->
        <view class="tab-list">
          <view
            v-for="(tab, index) in tabList"
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === index }"
            @click="switchTab(index)"
          >
            <text>{{ tab.name }}</text>
            <view v-if="currentTab === index" class="tab-indicator"></view>
          </view>
        </view>

        <!-- 日期选择器 -->
        <view class="date-selector" @click="showDatePicker">
          <text class="date-text">{{ currentDate }}</text>
          <uni-icons type="calendar" size="18" color="#ff9500"></uni-icons>
        </view>
      </view>

      <!-- 明细列表 -->
      <view class="detail-list">
        <view
          v-for="(item, index) in detailList"
          :key="index"
          class="detail-item"
          @click="goToSubsidyRewardDetail(item)"
        >
          <view class="detail-row">
            <view class="detail-label">结算日期</view>
            <view class="detail-label">参与订单数</view>
            <view class="detail-label">收入抵用券</view>
          </view>
          <view class="detail-row values">
            <view class="detail-value">{{ item.date }}</view>
            <view class="detail-value">{{ item.orderCount }}</view>
            <view class="detail-value">{{ item.couponAmount }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 日期选择弹框 -->
    <uni-popup ref="datePopup" type="bottom">
      <view class="date-picker-modal">
        <view class="picker-header">
          <text class="picker-cancel" @click="cancelDatePicker">取消</text>
          <text class="picker-title">选择月份</text>
          <text class="picker-confirm" @click="confirmDatePicker">确定</text>
        </view>
        <picker-view
          class="picker-view"
          :value="pickerValue"
          @change="pickerChange"
          :indicator-style="indicatorStyle"
        >
          <picker-view-column>
            <view v-for="year in years" :key="year" class="picker-item">
              {{ year }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="month in months" :key="month" class="picker-item">
              {{ month }}月
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 弹框引用
const datePopup = ref(null);

// Tab 列表
const tabList = ref([
  { name: "补贴奖励" },
  { name: "会员奖励" },
  { name: "潮客激活" },
  { name: "使用记录" },
]);

// 当前选中的 Tab
const currentTab = ref(0);

// 当前选择的日期
const currentDate = ref("2025-09");

// 日期选择器相关
const years = ref([]);
const months = ref([]);
const pickerValue = ref([0, 8]); // 默认2025年9月
// picker-view 选中标识样式，需与 .picker-item 高度一致
const indicatorStyle = "height: 68rpx;";

// 明细列表数据
const detailList = ref([
  {
    date: "2025-10-20",
    orderCount: "83",
    couponAmount: "40.1781",
  },
  {
    date: "2025-10-19",
    orderCount: "4",
    couponAmount: "2.4589",
  },
  {
    date: "2025-10-18",
    orderCount: "12",
    couponAmount: "1.2262",
  },
  {
    date: "2025-10-17",
    orderCount: "5",
    couponAmount: "0.8803",
  },
  {
    date: "2025-10-16",
    orderCount: "149",
    couponAmount: "566.9013",
  },
  {
    date: "2025-10-15",
    orderCount: "5",
    couponAmount: "0.2815",
  },
]);

// 初始化日期数据
const initDateData = () => {
  const currentYear = new Date().getFullYear();
  for (let i = currentYear - 5; i <= currentYear + 1; i++) {
    years.value.push(i);
  }
  for (let i = 1; i <= 12; i++) {
    months.value.push(i.toString().padStart(2, "0"));
  }
};

// 初始化
initDateData();

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 跳转到冻结抵用券页面
const goToFrozenCoupon = () => {
  uni.navigateTo({
    url: "/pages/index/couponDetails/frozenCoupon",
  });
};

// 跳转到未生效抵用券页面
const goToUnactivatedCoupon = () => {
  uni.navigateTo({
    url: "/pages/index/couponDetails/unactivatedCoupon",
  });
};

// 跳转到抵用券激活页面
const goToActivateCoupon = () => {
  uni.navigateTo({
    url: "/pages/index/couponDetails/activateCoupon",
  });
};

// 跳转到补贴奖励明细页面
const goToSubsidyRewardDetail = (item) => {
  console.log("查看补贴奖励明细:", item);
  uni.navigateTo({
    url: "/pages/index/couponDetails/subsidyRewardDetail",
  });
};

// 切换 Tab
const switchTab = (index) => {
  currentTab.value = index;
  // TODO: 根据不同 Tab 加载不同数据
};

// 显示日期选择器
const showDatePicker = () => {
  datePopup.value?.open();
};

// 取消日期选择
const cancelDatePicker = () => {
  datePopup.value?.close();
};

// 确认日期选择
const confirmDatePicker = () => {
  const year = years.value[pickerValue.value[0]];
  const month = months.value[pickerValue.value[1]];
  currentDate.value = `${year}-${month}`;
  datePopup.value?.close();
  // TODO: 根据选择的日期重新加载数据
};

// 日期选择器变化
const pickerChange = (e) => {
  pickerValue.value = e.detail.value;
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: 0;
  margin-top: 88rpx;
}

.content {
  padding: 32rpx;
}

// 抵用券统计卡片
.coupon-stats-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
  position: relative;

  &.clickable {
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

.stat-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
  font-size: 24rpx;
  color: #999;
}

.stat-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;

  &.primary {
    font-size: 36rpx;
    color: #333;
  }
}

.arrow-icon {
  margin-left: 10rpx;
}

.additional-stats {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.additional-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-top: 1rpx solid #f5f5f5;

  &:last-child {
    border-top: none;
  }

  &.clickable {
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

.additional-label {
  font-size: 28rpx;
  color: #333;
}

.additional-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin-right: 16rpx;
}

// Tab 和日期选择器组合容器
.tab-date-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 32rpx 32rpx;
  margin-bottom: 24rpx;
}

.tab-list {
  display: flex;
  align-items: center;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 32rpx 0;
  position: relative;
  font-size: 28rpx;
  color: #666;

  &.active {
    color: #333;
    font-weight: 500;
  }

  &:active {
    opacity: 0.7;
  }
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #ff9500;
  border-radius: 3rpx;
}

// 日期选择器
.date-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-top: 1rpx solid #f5f5f5;
  background-color: #f5f5f5;
  padding: 0 16rpx;
  border-radius: 50rpx;
  margin-top: 16rpx;

  &:active {
    opacity: 0.8;
  }
}

.date-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

// 明细列表
.detail-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.detail-item {
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f9f9f9;
  }
}

.detail-row {
  display: flex;
  align-items: start;
  justify-content: space-between;

  &.values {
    margin-top: 16rpx;
  }
}

.detail-label {
  flex: 1;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.detail-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  font-weight: 500;
}

// 日期选择弹框
.date-picker-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-confirm {
  font-size: 28rpx;
  color: #007aff;
}

.picker-view {
  height: 400rpx;
  padding: 0;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68rpx;
  font-size: 32rpx;
  color: #333;
}
</style>
